<template>
    <el-autocomplete
        class="w-full"
        v-model="props.modelValue"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入售后69码"
        @select="handleInSelect"
        @change="handChange"
    />

</template>

<script lang='ts' setup>


interface AutocompleteInterFace {
    modelValue?: Record<string, any>
    queryInfos: any []
    placeholder?: string
    
}

const props = withDefaults(defineProps<AutocompleteInterFace>(), {
    queryInfos: () => [{value: 'vue', link: 'https://github.com/vuejs/vue'}],
    placeholder:'请输入'
    
})

/**
 * 匹配参数
 *
 * @param queryString
 * @param cb
 */
function querySearchAsync(queryString: string, cb: (arg: any) => void) {
    const results = queryString ?
        props.queryInfos.filter((item) => item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0) : props.queryInfos
    cb(results)
}



const  emits = defineEmits(['change','select'])
/**
 * 选择
 * @param item
 */
function handleInSelect(item:any) {
    emits("select",item)
    console.log(item)
}

/**
 * 改变
 * @param value
 */
function handChange(value:any) {
    emits("change",value)
}


</script>
